<template>
    <div id="updStudent">
        <el-divider content-position="left">学生信息</el-divider>
        <div class="student" style="display: flex; gap: 20px;">
            <el-form :model="form" label-width="90px" inline>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="学号:" inline>
                            <el-input placeholder="" v-model="studentId" :disabled="true"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="姓名:" inline>
                            <el-input placeholder="输入姓名" v-model="studentName" style="width: 200px;"></el-input>

                        </el-form-item>
                        <span v-if="studentNameError"
                            style="color: red;font-size: 9px;position: absolute;left: 450px;top: 114px;">姓名不能为空</span>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="曾用名:" inline>
                            <el-input placeholder="输入曾用名" v-model="formerName" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="手机号:" inline>
                            <el-input placeholder="输入手机号" v-model="phoneNumber" style="width: 200px;"></el-input>
                        </el-form-item>
                        <span v-if="phoneNumberError"
                            style="color: red;font-size: 8px;position: absolute;left: 110px;top: 175px;">手机号不能为空</span>
                        <span v-if="phoneError"
                            style="color: red;font-size: 8px;position: absolute;left: 110px;top: 175px;">手机号格式错误</span>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="籍贯:" inline>
                            <el-input placeholder="输入籍贯" v-model="nativePlace" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">性别：</label>
                        <el-select v-model="sex" placeholder="请选择">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="民族:" inline>
                            <el-input placeholder="输入民族" v-model="nation" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">政治面貌：</label>
                        <el-select v-model="politicalName" placeholder="输入政治面貌" @click.native="getSysPoliticalList"
                            @change="politicalChange">
                            <el-option v-for="sysPolitical in sysPoliticalList" :key="sysPolitical.id"
                                :label="sysPolitical.politicalName" :value="sysPolitical.id">
                                {{ sysPolitical.politicalName }}
                            </el-option>
                        </el-select>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">班级：</label>
                        <el-select v-model="className" placeholder="输入班级" @click.native="getSysClassList"
                            @change="classChange">
                            <el-option v-for="sysClass in sysClassList" :key="sysClass.id" :label="sysClass.name"
                                :value="sysClass.id">
                                {{ sysClass.name }}
                            </el-option>

                        </el-select>
                        <span v-if="classError"
                            style="color: red;font-size: 10px;position: absolute;left: 748px;top: 235px;">班级不能为空</span>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="原毕业学校:" inline>
                            <el-input placeholder="输入原毕业学校" v-model="oldGraduationSchool"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">入学学期：</label>
                        <el-date-picker v-model="enrollmentDate" type="date" placeholder="选择日期"></el-date-picker>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">户籍省：</label>
                        <el-select v-model="selectedProvince" @change="getCitiesOptions">
                            <el-option value="" label="请选择省份"></el-option>

                            <el-option v-for="region in regionData" :key="region.province" :label="region.province"
                                :value="region.province"></el-option>
                        </el-select><br>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">户籍市：</label>
                        <el-select v-model="selectedCity">
                            <el-option value="" label="请选择城市"></el-option>
                            <el-option v-for="city in citiesOptions" :key="city" :label="city"
                                :value="city"></el-option>
                        </el-select>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">证件类型：</label>
                        <el-select v-model="documentName" placeholder="输入证件类型" @click.native="getSysDocumentList"
                            @change="documentChange">
                            <el-option v-for="sysDocument in sysDocumentList" :key="sysDocument.id"
                                :label="sysDocument.documentName" :value="sysDocument.id">
                                {{ sysDocument.documentName }}
                            </el-option>
                        </el-select>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">证件号：</label>
                        <el-input placeholder="输入证件号" v-model="documentNumber" style="width: 200px;"></el-input>
                    </div>
                </div><br>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">一卡通卡号：</label>
                        <el-input placeholder="输入一卡通卡号" v-model="smartCard" style="width: 200px;"></el-input>
                    </div>
                    <div style="flex: 1;">
                        <label style="font-size: 14px; color: #606266;">实际居住地址：</label>
                        <el-input placeholder="输入实际居住地址" v-model="address" style="width: 200px;"></el-input>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="家庭邮编:" inline>
                            <el-input placeholder="输入家庭邮编" v-model="postalCode" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="家庭电话:" inline>
                            <el-input placeholder="输入家庭电话" v-model="homePhone" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="特长爱好:" inline>
                            <el-input placeholder="输入特长爱好" v-model="hobby" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="获奖情况:" inline>
                            <el-input placeholder="输入获奖情况" v-model="awardSituation" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <el-form-item label="学生照片:" inline>
                            <div class="upload-container">
                                <el-upload class="centered-plus avatar-uploader-with-border" :action="uploadUrl"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon centered-plus-icon"></i>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                <el-divider content-position="left">监护人信息</el-divider>
                <div style="display: flex; gap: 50px;">
                    <div style="flex: 1;">
                        <el-form-item label="监护人姓名:" inline>
                            <el-input placeholder="输入监护人姓名" v-model="guardianName" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="监护人关系:" inline>
                            <el-input placeholder="输入监护人与学生关系" v-model="relation" style="width: 200px;"></el-input>
                        </el-form-item>
                    </div>
                    <div style="flex: 1;">
                        <el-form-item label="监护人电话:" inline>
                            <el-input placeholder="输入监护人联系电话" v-model="guardianPhone" style="width: 200px;"></el-input>
                        </el-form-item>
                        <span v-if="homePhoneError"
                            style="color: red;font-size: 10px;position: absolute;left: 815px;top: 720px;">监护人电话不能为空</span>
                    </div>
                </div>
                <el-divider content-position="left">缴费信息</el-divider>
                <div>
                    缴费类别：
                    <br>
                    <br>
                    <el-checkbox-group v-model="checkedOptions">
                        <el-checkbox v-for="sysPaycategory in sysPaycategoryList" :disabled="sysPaycategory.id === 5"
                            :checked="isChecked(sysPaycategory.id)" :label="sysPaycategory.id"
                            :key="sysPaycategory.id">{{ sysPaycategory.paymentName }}({{ sysPaycategory.payAmount
                            }})</el-checkbox>
                    </el-checkbox-group>
                </div>
                <br>
                <el-form-item>
                    <el-button @click.native="upd" style="background-color: blue;color: white;">提交</el-button>
                    <router-link to="/studentManagement"
                        style="color: black;text-decoration: none!important;"><el-button>返回</el-button></router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: 'UpdStudent',
    data() {
        return {
            id: '',
            rowId: '',
            sysPoliticalList: [],
            sysDocumentList: [],
            sysClassList: [],
            input: '',
            studentName: '',
            formerName: '',
            phoneNumber: '',
            nativePlace: '',
            sex: '',
            nation: '',
            politicalValue: null,
            classValue: null,
            documentValue: null,
            documentId: '',
            oldGraduationSchool: '',
            enrollmentDate: '',
            residenceProvince: '',
            residenceTown: '',
            form: {},
            homePhone: '',
            hobby: '',
            awardSituation: '',
            smartCard: '',
            address: '',
            postalCode: '',
            documentNumber: '',
            guardianName: '',
            relation: '',
            guardianPhone: '',
            sysPaycategoryList: [],
            checkedOptions: [],
            nameError: '',
            studentNameError: false,
            phoneNumberError: false,
            classError: false,
            homePhoneError: false,
            phoneError: false,
            studentId: null,
            regionData: [
                {
                    province: '湖南省',
                    cities: ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州']
                },
                {
                    province: '湖北省',
                    cities: ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区']
                }
            ],
            selectedProvince: '',
            selectedCity: '',
            action: null,
            imageUrl: '',
            tempFile: null,
            sysStudent: {},
            student: {},
            paymentCollection: '',
            uploadUrl: 'https://your-actual-upload-url.com/upload', // 替换为你的实际上传URL
            // uploadUrl:'',
        }
    },
    computed: {
        totalAmount() {
            let sum = 0;
            this.checkedOptions.forEach((amount) => {
                const item = this.sysPaycategoryList.find((sysPaycategory) => sysPaycategory.id === amount);
                if (item) {
                    sum += item.payAmount;
                }
            });
            return sum;
        },
        citiesOptions() {
            return this.getCitiesOptions();
        },
    },
    created() {

        this.sysStudent = this.$route.params.student;
        this.id = this.sysStudent.id;
        this.studentName = this.sysStudent.studentName;
        this.studentId = this.sysStudent.studentId;
        this.formerName = this.sysStudent.formerName;
        this.phoneNumber = this.sysStudent.phoneNumber;
        this.nativePlace = this.sysStudent.nativePlace;
        this.nation = this.sysStudent.nation;
        this.politicalName = this.sysStudent.politicalName;
        this.politicalId = this.sysStudent.politicalId;
        this.documentId = this.sysStudent.documentId;
        this.classId = this.sysStudent.classId;
        this.className = this.sysStudent.className;
        this.oldGraduationSchool = this.sysStudent.oldGraduationSchool;
        this.enrollmentDate = this.sysStudent.enrollmentDate;
        this.selectedProvince = this.sysStudent.residenceProvince;
        this.selectedCity = this.sysStudent.residenceTown;
        this.documentName = this.sysStudent.documentName;
        this.documentNumber = this.sysStudent.documentNumber;
        this.smartCard = this.sysStudent.smartCard;
        this.address = this.sysStudent.address;
        this.postalCode = this.sysStudent.postalCode;
        this.homePhone = this.sysStudent.homePhone;
        this.hobby = this.sysStudent.hobby;
        this.awardSituation = this.sysStudent.awardSituation;
        this.guardianName = this.sysStudent.guardianName;
        this.guardianPhone = this.sysStudent.guardianPhone;
        this.relation = this.sysStudent.relation;
        this.sex = this.sysStudent.sex;
        if (this.sysStudent.sex === 1) {
            this.sex = '男';
        } else if (this.sysStudent.sex === 2) {
            this.sex = '女';
        }
        this.paymentCollection = this.sysStudent.paymentCollection;
        this.checkedOptions = this.paymentCollection.split(",");
        this.tempFile = this.sysStudent.photo;
        console.log(this.checkedOptions);
        console.log(this.tempFile);
        this.getSysPaycategoryList();

    },
    mounted() {

    },
    methods: {
        isChecked(id) {
            return this.paymentCollection.split(',').includes(id.toString());
        },
        getSysStudent() {
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/student/getSysStudentById',
                method: 'post',
                params: {
                    id: this.rowId
                },
                headers: {
                    'Authorization': Authorization
                }
            })
                .then(response => {
                    console.log(response);
                    this.sysStudent = response.data.data;
                    this.studentName = this.sysStudent.studentName;

                    if (this.sysStudent.sex === 1) {
                        this.sex = '男';
                    } else if (this.sysStudent.sex === 2) {
                        this.sex = '女';
                    }

                })
        },
        handleAvatarSuccess(response) {
            this.imageUrl = response.data.url;
        },
        beforeAvatarUpload(file) {
            const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isImage) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
            }
            if (isImage && isLt2M) {
                // 创建一个FileReader来读取文件内容  
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.imageUrl = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            this.tempFile = file;
            console.log(file);
            return false;
        },
        handleProvinceChange() {
            this.selectedCity = '';
        },
        getCitiesOptions() {
            const selectedProvince = this.selectedProvince;
            const provinceData = this.regionData.find(
                (item) => item.province === selectedProvince
            );
            if (provinceData) {
                return provinceData.cities;
            }
            return [];
        },
        politicalChange(politicalValue) {
            this.politicalValue = politicalValue;
            console.log("政治面貌：" + this.politicalValue);
        },
        documentChange(documentValue) {
            this.documentId = documentValue;
            console.log("证件名：" + this.documentId);
        },
        classChange(classValue) {
            this.classValue = classValue;
            console.log("班级名：" + this.classValue);
        },
        // upd() {
        //     console.log("tempFile:" + this.tempFile);
        //     let Authorization = localStorage.getItem("Authorization");
        //     if (this.studentName == '') {
        //         this.studentNameError = true;
        //         return;
        //     } else {
        //         this.studentNameError = false;
        //     }
        //     if (this.phoneNumber == '') {
        //         this.phoneError = false;
        //         this.phoneNumberError = true;
        //         return;
        //     }
        //     let phoneNumberReg = /^1[3-9]\d{9}$/;
        //     if (!phoneNumberReg.test(this.phoneNumber)) {
        //         this.phoneNumberError = false;
        //         this.phoneError = true;
        //         return;
        //     }
        //     if (this.className == '') {
        //         this.classError = true;
        //         return;
        //     }
        //     if (this.homePhone == '') {
        //         this.homePhoneError = true;
        //         return;
        //     }
        //     if (this.sex == '男') {
        //         this.sex = 1;
        //     } else if (this.sex == '女') {
        //         this.sex = 2;
        //     }
        //     const formData = new FormData();
        //     formData.append('file', this.tempFile);
        //     // let dateObj = new Date(this.enrollmentDate);
        //     // //然后按照上面处理Date对象的方式进行格式化
        //     // let year = dateObj.getFullYear();
        //     // let month = String(dateObj.getMonth() + 1).padStart(2, '0');
        //     // let day = String(dateObj.getDate()).padStart(2, '0');
        //     // let formattedDate = `${year}-${month}-${day}`;
        //     formData.append('id', this.id);
        //     formData.append('studentId', this.studentId);
        //     formData.append('studentName', this.studentName);
        //     formData.append('formerName', this.formerName);
        //     formData.append('phoneNumber', this.phoneNumber);
        //     formData.append('nativePlace', this.nativePlace);
        //     formData.append('sex', this.sex);
        //     formData.append('nation', this.nation);
        //     formData.append('politicalId', this.politicalValue);
        //     formData.append('classId', this.classValue);
        //     formData.append('documentId', this.documentId);
        //     formData.append('oldGraduationSchool', this.oldGraduationSchool);
        //     formData.append('enrollmentDate', this.enrollmentDate);
        //     formData.append('residenceProvince', this.selectedProvince);
        //     formData.append('residenceTown', this.selectedCity);
        //     formData.append('homePhone', this.homePhone);
        //     formData.append('hobby', this.hobby);
        //     formData.append('awardSituation', this.awardSituation);
        //     formData.append('documentNumber', this.documentNumber);
        //     formData.append('smartCard', this.smartCard);
        //     formData.append('address', this.address);
        //     formData.append('postalCode', this.postalCode);
        //     formData.append('totalAmount', this.totalAmount);
        //     formData.append('guardianName', this.guardianName);
        //     formData.append('relation', this.relation);
        //     formData.append('guardianPhone', this.guardianPhone);
        //     formData.append('paymentCollection', this.checkedOptions.join(','));
        //     axios({
        //         url: 'http://localhost:9002/sys/student/updSysStudentById',
        //         method: 'post',
        //         data: formData,
        //         headers: {
        //             'Authorization': Authorization
        //         }
        //     })
        //         .then(response => {
        //             console.log(response);
        //             if (response.data.status == 200) {
        //                 this.$router.push('/studentManagement');
        //             } else if (response.data.status == 500) {
        //                 alert("添加失败");
        //             }
        //         })
        // },
        getSysPoliticalList() {
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/political/getSysPoliticalList',
                method: 'post',
                headers: {
                    'Authorization': Authorization
                }
            })
                .then(response => {
                    console.log(response);
                    this.sysPoliticalList = response.data.data;
                })
        },
        getSysDocumentList() {
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/document/getSysDocumentList',
                method: 'post',
                headers: {
                    'Authorization': Authorization
                }
            })
                .then(response => {
                    console.log(response);
                    this.sysDocumentList = response.data.data;
                })
        },
        getSysClassList() {
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/class/getSysClass',
                method: 'post',
                headers: {
                    'Authorization': Authorization
                }
            })
                .then(response => {
                    console.log(response);
                    this.sysClassList = response.data.data;
                })
        },
        getSysPaycategoryList() {
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/paycategory/getSysPaycategoryList',
                method: 'post',
                headers: {
                    'Authorization': Authorization
                }
            })
                .then(response => {
                    console.log(response);
                    this.sysPaycategoryList = response.data.data;
                })
        },
        upd() {
            const formData = new FormData();
            if (this.imageUrl == '') {
                alert("请上传照片");
                return;
            }
            console.log(this.tempFile);
            formData.append('file', this.tempFile);
            console.log("省市" + this.selectedProvince + this.selectedCity)
            let Authorization = localStorage.getItem("Authorization");
            console.log("费用id：" + this.checkedOptions);
            console.log("总学费：" + this.totalAmount);
            if (this.studentName == '') {
                this.studentNameError = true;
                return;
            } else {
                this.studentNameError = false;
            }
            if (this.phoneNumber == '') {
                this.phoneError = false;
                this.phoneNumberError = true;
                return;
            }
            let phoneNumberReg = /^1[3-9]\d{9}$/;
            if (!phoneNumberReg.test(this.phoneNumber)) {
                this.phoneNumberError = false;
                this.phoneError = true;
                return;
            }
            if (this.classValue == '') {
                this.classError = true;
                return;
            }
            // if(this.homePhone == ''){
            //     this.homePhoneError=true;
            //     return;
            // }
            if (this.sex === '男') {
                this.sex = 1;
            } else if (this.sex === '女') {
                this.sex = 2;
            }
            console.log("时间：" + this.enrollmentDate);
            let dateObj = new Date(this.enrollmentDate);
            // 然后按照上面处理Date对象的方式进行格式化
            let year = dateObj.getFullYear();
            let month = String(dateObj.getMonth() + 1).padStart(2, '0');
            let day = String(dateObj.getDate()).padStart(2, '0');
            let formattedDate = `${year}-${month}-${day}`;
            formData.append('id', this.id);
            formData.append('studentId', this.studentId);
            formData.append('studentName', this.studentName);
            formData.append('formerName', this.formerName);
            formData.append('phoneNumber', this.phoneNumber);
            formData.append('nativePlace', this.nativePlace);
            formData.append('sex', this.sex);
            formData.append('nation', this.nation);
            formData.append('politicalId', this.politicalId);
            formData.append('classId', this.classId);
            formData.append('documentId', this.documentId);
            formData.append('oldGraduationSchool', this.oldGraduationSchool);
            formData.append('enrollmentDate', formattedDate);
            formData.append('residenceProvince', this.selectedProvince);
            formData.append('residenceTown', this.selectedCity);
            formData.append('homePhone', this.homePhone);
            formData.append('hobby', this.hobby);
            formData.append('awardSituation', this.awardSituation);
            formData.append('documentNumber', this.documentNumber);
            formData.append('smartCard', this.smartCard);
            formData.append('address', this.address);
            formData.append('postalCode', this.postalCode);
            formData.append('totalAmount', this.totalAmount);
            formData.append('guardianName', this.guardianName);
            formData.append('relation', this.relation);
            formData.append('guardianPhone', this.guardianPhone);
            formData.append('paymentCollection', this.checkedOptions.join(','));
            axios({
                url: 'http://localhost:9002/sys/student/updSysStudentById',
                method: 'post',
                data: formData,
                headers: {
                    'Authorization': Authorization
                },

            })
                .then(response => {
                    console.log(response);
                    if (response.data.status == 200) {
                        this.$router.push('/studentManagement');
                    } else if (response.data.status == 500) {
                        alert("添加失败");
                    }
                })
        },
    }
}
</script>
<style scoped>
.an {
    background-color: #1890ff;
    color: white;
    font-size: 13px;
    width: 80px;
    height: 30px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 8px;
}

.avatar-uploader-with-border {
    border: 1px dashed #6c6060;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    position: relative;
}

.centered-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.upload-container {
    display: flex;
    align-items: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>